import React from 'react'
import store, { asyncChangeCheckAction, asyncGetListAction, asyncDelTodoAction } from '../../redux/store'
export default function Index(props) {
  const changeCheck = async (id) => {
    // 发送ajax请求，触发异步的action
    let { data: { status } } = await store.dispatch(asyncChangeCheckAction(id));
    console.log(status)
    if (status === 1) {
      // console.log("更新成功")
      store.dispatch(asyncGetListAction());
    } else {
      console.log("更新失败");
    }
  }
  const deltask = async (id) => {
    // 实现删除方法 
    console.log(id);
    let { data: { status } } = await store.dispatch(asyncDelTodoAction(id));
    if (status === 1) {
      store.dispatch(asyncGetListAction());
    } else {
      console.log("删除失败")
    }
  }
  return (
    <div>
      <li ><input type="checkbox" checked={props.done} onChange={() => { changeCheck(props.id) }} />  <span style={{ textDecoration: props.done ? "line-through" : '' }}>{props.val}</span>  <button onClick={() => { deltask(props.id) }} className='del'>删除</button></li>
    </div>
  )
}
